<template>
  <div>
    <div class="control">
      <Button type="primary" @click="add">添加</Button>
    </div>
    <Table row-key="id" :columns="tableColumns" :data="tableData" border>
      <template slot="action" slot-scope="{ row, index }">
        <Button type="primary" @click="edit(row)">编辑</Button>
        <Button type="warning" @click="bind(row)">绑定菜单/行为</Button>
        <Button type="error" @click="del(row)">删除</Button>
      </template>
    </Table>

    <Modal v-model="modal"
           title="添加/编辑"
           :draggable="false">
      <div slot="footer">
        <Button @click="modal = false">取消</Button>
        <Button type="primary" @click="handlerSubmit">确定</Button>
      </div>
      <Form ref="editForm" :model="editForm" :rules="formRules" :label-width="80">
        <FormItem label="上级菜单" prop="parent_id">
          <Select v-model="editForm.parent_id">
            <Option v-for="item in parentMenu" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="菜单名称" prop="name">
          <Input v-model="editForm.name"></Input>
        </FormItem>
        <FormItem label="key" prop="key">
          <Input v-model="editForm.key"></Input>
        </FormItem>
        <FormItem label="排序" prop="sort">
          <Input v-model="editForm.sort"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="menuModal"
           title="菜单行为列表"
           :draggable="false">
      <div slot="footer">
        <Button @click="menuModal = false">关闭</Button>
        <Button type="primary" @click="handlerBindSubmit">确定</Button>
      </div>
      <div class="margin-bottom flex">
        <Input v-model="searchText" placeholder="请输入要搜索的内容"></Input>
        <Button type="primary" @click="searchMenuData">搜索</Button>
      </div>
      <Table row-key="id" :columns="menuTableColumns" :data="menuTableData" border
             @on-select="onSelect"
             @on-select-cancel="onSelect"
             @on-select-all="onSelect"
             @on-select-all-cancel="onSelect">
      </Table>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "menu",
  layout: 'frame_admin',
  data() {
    return {
      tableColumns: [
        {title: 'ID', key: 'id', maxWidth: 100, tree: true, align: 'center'},
        {title: '菜单名称', key: 'name'},
        {title: 'key', key: 'key'},
        {title: '排序', key: 'sort'},
        {title: '操作', slot: 'action'}
      ],
      tableData: [],
      modal: false,
      editForm: {
        name: '',
        desc: ''
      },
      formRules: {
        name: [
          {required: true, message: '请填写菜单名称', trigger: 'blur'}
        ],
        key: [
          {required: true, message: '请填写key', trigger: 'blur'}
        ],
      },
      parentMenu: [],
      menuModal: false,
      menuTableColumns: [
        {type: 'selection', width: 60, align: 'center'},
        {title: 'ID', key: 'id', tree: true, align: 'center'},
        {title: '菜单名称', key: 'name'},
        {title: 'url', key: 'url'}
      ],
      menuTableData: [],
      currentData: '',
      searchText: '',
      selection: [],
    }
  },
  watch: {
    tableData(val, oldVal) {
      this.parentMenu = val;
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      const that = this;
      this.$axios.get('admin/menuGroup/list').then(res => {
        that.tableData = res.data;
      })
    },
    handlerSubmit() {
      const that = this;
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          that.$Spin.show();
          that.$axios.post('admin/menuGroup/edit', that.editForm).then(res => {
            that.$Spin.hide();
            that.loadData();
          })
          that.modal = false;
        }
      })
    },
    handlerBindSubmit() {
      const that = this;
      this.$axios.post('admin/menuGroup/bind', {
        id: this.currentData,
        menu_ids: this.selection.join(',')
      }).then(res=>{
        that.menuModal = false;
      })
    },
    add() {
      this.modal = true;
      this.editForm = {};
    },
    edit(row) {
      this.editForm = row;
      this.modal = true;
    },
    del(row) {
      const that = this;
      this.$Modal.confirm({
        title: '确认删除？',
        content: '此操作不可逆，是否确认删除当前这条数据',
        onOk: () => {
          that.$axios.post('admin/menuGroup/del', {id: row.id}).then(res => {
            if (res.code === 0) {
              that.$Message.success('删除成功');
              that.loadData();
            }
          })
        }
      });
    },
    bind(row) {
      this.menuModal = true;
      this.currentData = row.id;
      if (row.menu_ids) {
        this.selection = row.menu_ids.split(',');
      } else {
        this.selection = [];
      }
      this.searchMenuData();
    },
    searchMenuData() {
      const that = this;
      this.$axios.get('admin/menuGroup/searchMenu', {params: {text: this.searchText}}).then(res => {
        that.menuTableData = res.data;
        that.menuTableData.forEach(menu => {
          for (const s of that.selection) {
            if (menu.id == s) {
              menu._checked = true;
            }
          }
          if (menu.children) {
            menu.children.forEach(menu2 => {
              for (const s of that.selection) {
                if (menu2.id == s) {
                  menu2._checked = true;
                }
              }
              if (menu2.children) {
                menu2.children.forEach(menu3 => {
                  for (const s of that.selection) {
                    if (menu3.id == s) {
                      menu3._checked = true;
                    }
                  }
                })
              }
            })
          }
        })
      })
    },
    onSelect(selection, row) {
      const selectedIds = []
      selection.forEach(item => {
        selectedIds.push(item.id);
      })
      this.selection = selectedIds;
    },
  }
}
</script>

<style scoped>

</style>